<template>
    <div id="song_info_">
        <tab-text
            :slotList="[
                {
                    label: '歌曲信息',
                    name: 'second',
                    slotName: 'songinfo',
                    show: true
                },
                {
                    label: '专辑信息',
                    name: 'third',
                    slotName: 'albuminfo',
                    show: true
                }
            ]"
            active="second"
        >
            <!-- 歌曲信息 -->
            <song-info-2
                slot="songinfo"
                :propsData="{
                    btn: btn,
                    disabled: disabled
                }"
            />

            <!-- 专辑信息 -->
            <album-info-2 slot="albuminfo" />
        </tab-text>
    </div>
</template>

<script>
export default {
    name: 'SongInfo',
    data() {
        return {
            btn: true,
            disabled: false
        };
    },
    watch: {
        $route: {
            deep: true,
            immediate: true,
            handler(a, b) {
                console.log(a, b);
                if (a.name === 'SongInfo') {
                    this.btn =
                        this.$storage.get('operate').name1 === 'edit' ? true : this.$storage.get('operate').name1 === 'search' ? false : true;
                    this.disabled =
                        this.$storage.get('operate').name1 === 'edit'
                            ? false
                            : this.$storage.get('operate').name1 === 'search'
                            ? true
                            : false;
                }
            }
        }
    },
    components: {
        'tab-text': () => import('@/components/common/TabText.vue'),
        'song-info-2': () => import('./songInfo_2/songInfo_2.vue'),
        'album-info-2': () => import('./AlbumInfo_2_/AlbumInfo_2_.vue')
    }
    // activated/watch/data/destroyed/computed/methods 全部抽离到了 songInfo_2.vue 中
};
</script>

<style lang="scss">
// 样式全部抽离到了 songInfo_2.vue 中
</style>
